<template>
  <div>
    <div class="star mb-10" :class="starType">
        <span class="star-item" v-for = "(itemClass,idx) in itemClassess" :key="idx" :class="itemClass" track-by="$index"></span>
    </div>
  </div>
</template>

<script>
     const LENGTH = 5;//星星个数
     const CLS_ON = "on";//满星状态
     const CLS_HALF = "half";//半星状态
     const CLS_OFF = "off";//无星状态

    export default {
         props: {
            size: {
                type : Number//参数：尺寸
            },
            score: {
                type : Number//参数：评分
            }
         },
         computed: {
            starType(){//设置星星尺寸
                return "star-" + this.size;
            },
            itemClassess(){
                let result = [];//记录状态的数组
                let score = Math.floor(this.score * 2) / 2;
                // console.log('score', score)
                let hasDecimal = score % 1 !==0;
                let integer = Math.floor(score);//向下取整
                console.log('integer', integer)
                //全星
                for(let i = 0; i < integer; i++){
                    result.push(CLS_ON);
                }
                //半星
                if(hasDecimal){
                    result.push(CLS_HALF);
                }
                //无星
                if(result.length < LENGTH){
                    if(result.length ==4) {
                        result.push(CLS_OFF);
                    } else if(result.length ==3) {
                        result.push(CLS_OFF,CLS_OFF);
                    }else if(result.length ==2) {
                        result.push(CLS_OFF,CLS_OFF,CLS_OFF);
                    }
                    else if(result.length ==1) {
                        result.push(CLS_OFF,CLS_OFF,CLS_OFF,CLS_OFF);
                    }
                    
                }
                return result;
            }
         }
    }
</script>

<style>
    .star {
        display: flex;
        width: 100%;
    }
    .star-48 .star-item { 
        width: 20px;
        height: 20px;
        margin-right: 18px;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }
    .star-48 .star-item:last-child {
        margin-right: 0px;
    }
    .star-48 .star-item.on {
        background-image: url("~@/assets/image/service/star.png");
    }
    .star-48 .star-item.half {
        background-image: url("~@/assets/image/service/star3.png");
    }
    .star-48 .star-item.off {
        background-image: url("~@/assets/image/service/star2.png");
    }

    .star-36 .star-item { 
        width: 15px;
        height: 15px;
        margin-right: 6px;
        background-repeat: no-repeat;
        background-size: 15px 15px;
    }
    .star-36 .star-item:last-child {
        margin-right: 0px;
    }
    .star-36 .star-item:last-child {
        margin-right: 0px;
    }
    .star-36 .star-item.on {
       background-image: url("~@/assets/image/service/star.png");
    }
    .star-36 .star-item.half {
        background-image: url("~@/assets/image/service/star3.png");
    }
    .star-36 .star-item.off {
        background-image: url("~@/assets/image/service/star2.png");
    }
</style>